<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表盘</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue@2.7.10.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <!-- 引入 ECharts -->
    <script src="js/echarts@5.3.3.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            font-family: "Helvetica Neue", Arial, sans-serif;
            /*overflow: hidden;*/
        }

        .dashboard {
            padding: 20px;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .dashboard .el-card__header {
            font-size: 16px;
            font-weight: bold;
        }

        /* 图表容器样式 */
        #trendChart, #statChart {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 顶部统计数据 -->
    <el-row :gutter="20">
        <el-col :span="8">
            <el-card class="dashboard">
                <div slot="header" class="clearfix">
                    <span>今日预约数</span>
                </div>
                <div style="font-size: 24px; text-align: center;">{{ dashboardData.todayAppointments }}</div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="dashboard">
                <div slot="header" class="clearfix">
                    <span>今日订单数</span>
                </div>
                <div style="font-size: 24px; text-align: center;">{{ dashboardData.todayOrders }}</div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="dashboard">
                <div slot="header" class="clearfix">
                    <span>今日营业额</span>
                </div>
                <div style="font-size: 24px; text-align: center;">¥{{ dashboardData.todayRevenue }}</div>
            </el-card>
        </el-col>
    </el-row>

    <!-- 近期预约趋势图表 -->
    <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
            <el-card class="dashboard">
                <div id="trendChart"></div>
            </el-card>
        </el-col>
    </el-row>

    <!-- 新增统计图（柱状图展示） -->
    <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
            <el-card class="dashboard">
                <div id="statChart"></div>
            </el-card>
        </el-col>
    </el-row>
</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        // 今日预约数 今日订单数 今日营业额
        dashboardData: {

        },
        // 近期预约趋势：包含最近7天每天的预约数
        trendData: {

        },
        // 近期订单数：包含最近7天每天的订单数
        statData: {

        }
      }
    },
    mounted() {
      this.loadDashboardData().then(()=>{
          this.initTrendChart();
          this.initStatChart();
          window.addEventListener('resize', () => {
              if (this.trendChart) this.trendChart.resize();
              if (this.statChart) this.statChart.resize();
          });
      })
    },
    methods: {
      loadDashboardData() {
          return axios.get('/dashboard').then(res => {
              this.dashboardData = res.data.dashboardData;
              this.trendData = res.data.trendData;
              debugger
              this.statData = res.data.statData;
          });
      },
      initTrendChart() {
        // 初始化预约趋势图表
        this.trendChart = echarts.init(document.getElementById('trendChart'));
        const option = {
          title: {
            text: '近期预约趋势',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: this.trendData.dates
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '预约数',
            type: 'line',
            data: this.trendData.appointments,
            smooth: true,
            lineStyle: {
              width: 3
            }
          }]
        };
        this.trendChart.setOption(option);
      },
      updateTrendChart() {
        if (this.trendChart) {
          this.trendChart.setOption({
            xAxis: { data: this.trendData.dates },
            series: [{ data: this.trendData.appointments }]
          });
        }
      },
      initStatChart() {
        // 初始化统计图（采用柱状图展示）
        this.statChart = echarts.init(document.getElementById('statChart'));
        const option = {
          title: {
            text: '近期统计数据',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: this.statData.dates
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '订单数',
            type: 'bar',
            data: this.statData.values,
            itemStyle: {
              color: '#409EFF'
            }
          }]
        };
        this.statChart.setOption(option);
      },
      updateStatChart() {
        if (this.statChart) {
          this.statChart.setOption({
            xAxis: { data: this.statData.dates },
            series: [{ data: this.statData.values }]
          });
        }
      }
    }
  });
</script>
</body>
</html>
